<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">
		<h:form id="leaveBalanceForm">
			<p:focus for=":leaveBalanceForm:applyLeaveButton" />


			
			<h:panelGrid>
			<h:outputText value="Leave Balance" styleClass="outputTextTitle" />
				<p:growl id="growl"></p:growl>
				<h:panelGrid columns="2">
					<h:panelGrid style="border: 1px solid #d9d9d9; width: 33%">

						<h:panelGrid>
							<h:panelGroup>
								<h:outputLabel
									value="Leave balances for month #{leaveBalanceBean.leavesMonth}"
									styleClass="outputTextSubTitle" />
							</h:panelGroup>
							<h:panelGrid columns="3"
								style="width:200px;">
							<p:panelGrid columns="4"
								style="width:200px;">

								<h:outputText value="OH"
									/>
								<h:outputText value="PL"
									 />
								<h:outputText value="SL"
									/>
									<h:outputText value="CL"
									/>
								
								

								<h:outputText value="#{leaveBalanceBean.ohBalance}"
									/>
								<h:outputText value="#{leaveBalanceBean.plBalance}"
									 />

								<h:outputText value="#{leaveBalanceBean.slBalance}"
									 />

								<h:outputText value="#{leaveBalanceBean.clBalance}"
									 />
                              </p:panelGrid>
                              <h:panelGroup></h:panelGroup>
                              <p:panelGrid columns="3"
								style="width:200px;">      
								<h:outputText value="WH"
									 />      
								<h:outputText value="LOP"
									/>
									<h:outputText value="CMP"
									/>
								<h:outputText value="#{leaveBalanceBean.whBalance}"
									 />
								<h:outputText value="#{leaveBalanceBean.lopBalance}"
									/>
									<h:outputText value="#{leaveBalanceBean.compOffBalance}"
									/>



							    </p:panelGrid>
							    </h:panelGrid>

						</h:panelGrid>


					</h:panelGrid>
					<h:panelGrid>
						<p:commandLink onmouseover="holidaysList.show()"
							value="List of holidays in 2012" styleClass="outputTextSubTitle"></p:commandLink>

					</h:panelGrid>
					<p:dialog widgetVar="holidaysList" showHeader="false"
						resizable="false" draggable="true">
						<h:outputLabel value="Holiday List"
							styleClass="outputTextSubTitle" style="margin-left: 2px; " />
						<h:panelGrid
							style="min-height:300px; min-width: 400px;border-top:1px solid #d9d9d9;">
							<h:dataTable value="#{leaveBalanceBean.holidaysList}"
								var="holidayCalendar" style="width: 100%">
								<p:column style="text-align:left;">
									<h:panelGrid style="width:100%">
										<h:outputText value="#{holidayCalendar.holidayDate}"
											style="margin-right:10px;float:left;">

											<f:convertDateTime pattern="dd-MMM-yyyy"
												timeZone="#{holidayCalendarBean.defaultTimeZone}" />
										</h:outputText>
									</h:panelGrid>
								</p:column>
								<p:column style="text-align:left;">

									<h:outputText value="#{holidayCalendar.nameOfTheOccassion}"
										style="margin-right:10px;" />
								</p:column>
								<p:column style="text-align:left;">

									<h:outputText value="#{holidayCalendar.occassionDay}" />
								</p:column>


							</h:dataTable>
						</h:panelGrid>
						<h:panelGrid
							style="width:100%; border-top: 1px solid #d9d9d9; margin-top: 10px;">
							<h:panelGroup style="float:right">
								<p:commandButton onclick="holidaysList.hide()" value="Close"></p:commandButton>
							</h:panelGroup>
						</h:panelGrid>
					</p:dialog>
				</h:panelGrid>
				<h:inputHidden />
				<h:inputHidden />
				<h:panelGrid columns="2">
					<p:commandButton id="applyLeaveButton" value="Apply Leave"
						oncomplete="applyLeaveWidget.show()" update="@form" />
					
					<br />
				</h:panelGrid>
				<h:inputHidden />
				<h:inputHidden />
				<h:inputHidden />
				<h:inputHidden />
				<h:inputHidden />
				<h:inputHidden />
				<h:inputHidden />
				<h:inputHidden />
				<h:inputHidden />
				<h:inputHidden />
				<h:inputHidden />
				<h:inputHidden />

				<h:outputLabel value="Applied leave details"
					styleClass="outputTextSubTitle"
					rendered="#{leaveBalanceBean.renderEmployeeLeaves}" />
				<h:panelGrid rendered="#{leaveBalanceBean.renderEmployeeLeaves}">

					<p:dataTable id="leavedetailsDataTable"  paginator="true" rows="10"  paginatorPosition="bottom"
                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                 rowsPerPageTemplate="5,10,15"
						value="#{leaveBalanceBean.employeeLeaves}" var="employeeLeave">
						<f:facet name="header">
							<h:outputLabel value="" />
						</f:facet>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Applied On" />
							</f:facet>
							<h:outputText value="#{employeeLeave.appliedOn}">
								<f:convertDateTime pattern="dd-MMM-yyyy"></f:convertDateTime>
							</h:outputText>
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Leave Type" />
							</f:facet>
							<h:outputText value="#{employeeLeave.leaveType.leaveType}" />
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Leave From" />
							</f:facet>
							<h:outputText value="#{employeeLeave.periodFrom}">
								<f:convertDateTime pattern="dd-MMM-yyyy"
									timeZone="#{leaveBalanceBean.defaultTimeZone}"></f:convertDateTime>
							</h:outputText>
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Leave To" />
							</f:facet>
							<h:outputText value="#{employeeLeave.periodTo}">
								<f:convertDateTime pattern="dd-MMM-yyyy"
									timeZone="#{leaveBalanceBean.defaultTimeZone}" />
							</h:outputText>
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="No.of Days" />
							</f:facet>
							<h:outputText value="#{employeeLeave.noOfDays}" />
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Approval Status" />
							</f:facet>
						<h:outputText value="#{employeeLeave.approvalStatus}" style="color:green;font-style:bold;" rendered="#{employeeLeave.approvalStatus eq 'APPROVED'}"/>
						<h:outputText value="#{employeeLeave.approvalStatus}" style="color:#FFCCO;font-style:bold;" rendered="#{employeeLeave.approvalStatus eq 'IN PROCESS'}"/>
						<h:outputText value="#{employeeLeave.approvalStatus}" style="color:#FFCCO;font-style:bold;" rendered="#{employeeLeave.approvalStatus eq 'CANCELLATION IN PROCESS'}"/>
						<h:outputText value="#{employeeLeave.approvalStatus}" style="color:#F60000;" rendered="#{employeeLeave.approvalStatus eq 'REJECTED'}"/>
						<h:outputText value="#{employeeLeave.approvalStatus}" style="color:#F60000;" rendered="#{employeeLeave.approvalStatus eq 'CANCELLED'}"/>
						</p:column>
                        <p:column>
						 <f:facet name="header">
								<h:outputText value="More" />
							</f:facet>
						 <h:outputText id="leavedetails" value="more" style="float: right; color: #EAAB00;  cursor: pointer;"/>
						  <p:tooltip for="leavedetails">
		                	<h:panelGrid  cellspacing="5" style="width: 300px;">   
		                		<h:panelGrid columns="3" style="width: 300px;" columnClasses="gridCellTopeLeftAligned,gridCellMiddleLeftAligned,grid168pxCellMiddleLeftAligned">     
			                		<h:outputText value="Reason" style="font-weight: bold;"/>        
			                		<h:outputText value=""/>    
			                		<h:outputText value="#{employeeLeave.reason}" />    
			                		<h:outputText value="Approved By" style="font-weight: bold;"/>
			                		<h:outputText value="" />
			                		<h:outputText value="#{employeeLeave.approver.firstName} #{employeeLeave.approver.lastName}" >
			                			
			                		</h:outputText>
			                		<h:outputText value="No of Days" style="font-weight: bold;"/>
			                		<h:outputText value="" />
			                		<h:outputText value="#{employeeLeave.noOfDays}" >
			                			
			                		</h:outputText>
			                		
		                		</h:panelGrid>
		                	
		                		
		                	</h:panelGrid>
		                </p:tooltip> 
		                </p:column>

						<p:column>
							<f:facet name="header">
								<h:outputText value="Cancel Leave" />
							</f:facet>

							<p:commandButton value="Cancel Leave"
								oncomplete="cancelLeaveWidget.show();" update="@form"
								disabled="#{(employeeLeave.approvalStatus eq	'REJECTED' and employeeLeave.cancellationStatus ne 'CR') or employeeLeave.approvalStatus eq 'CANCELLED' or employeeLeave.approvalStatus eq 'CANCELLATION IN PROCESS'}">
								<f:setPropertyActionListener
									target="#{leaveBalanceBean.selectedEmployeeLeave}"
									value="#{employeeLeave}"></f:setPropertyActionListener>
							</p:commandButton>

						</p:column>
						<!-- <p:column>
							<f:facet name="header">
								<h:outputText value="Cancellation Status" />
							</f:facet>


							<h:outputLabel value="#{employeeLeave.cancellationStatus}"
								rendered="#{employeeLeave.cancellationStatus eq 'CANCELLATION IN PROCESS'}" style="color:#FFCCO;"/> 
                            <h:outputLabel value="#{employeeLeave.cancellationStatus}"
								rendered="#{employeeLeave.cancellationStatus eq 'ACCEPTED'}" style="color:green;"/>
							<h:outputLabel value="#{employeeLeave.cancellationStatus}" style="color:#F60000;"
								rendered="#{employeeLeave.cancellationStatus eq 'REJECTED'}"/>	
                            
                            
						</p:column>
						 -->    
					</p:dataTable>

				</h:panelGrid>



				<h:outputLabel styleClass="outputTextSubTitle"
					style="font-size:12px;"
					value="Note: Leaves are calculated on financial year basis (Apr to Mar).
                           PL and SL can be carried forward.
                           CL will get lapsed every March." />
				<p:spacer></p:spacer>
               <h:outputLabel styleClass="outputTextSubTitle"
						style="font-size:12px;"
						value="Note:Leaves will be updated on 26th of every month." />

			</h:panelGrid>
			
			<h:panelGrid>
			<p:dialog widgetVar="applyLeaveWidget" resizable="false" 
				header="Apply Leave" hideEffect="fade" showEffect="fade"
				modal="true" id="applyLeaveWidget">
				<h:panelGrid columns="1" >
				<p:panel>
					<h:panelGrid columns="8" style="width: 650px;" id="diaglogGrid">
					     <h:inputHidden/>
						<h:outputLabel value="#{msg['employeeid.label']}"
							style="font-size: 12px;" />
						<h:outputLabel value=" : " />
						<p:inplace>
							<p:inputText value="#{leaveBalanceBean.wamUser.employeeCode}"
								readonly="true" />
						</p:inplace>
                         <h:inputHidden/>   
						<h:outputLabel value="#{msg['employeename.label']}"
							style="font-size: 12px;" />
						<h:outputLabel value=" : " />
						<p:inplace>
							<p:inputText
								value="#{leaveBalanceBean.wamUser.employee.firstName} #{leaveBalanceBean.wamUser.employee.lastName}"
								readonly="true" />
						</p:inplace>
                         <h:inputHidden/>  
						<h:outputLabel value="#{msg['modulename.label']}"
							style="font-size: 12px;" />
						<h:outputLabel value=" : " />
						<p:inplace>
							<p:inputText
								value="#{leaveBalanceBean.wamUser.employee.moduleName}"
								readonly="true" />
						</p:inplace>
                         <h:inputHidden/>  
						<h:outputLabel value="#{msg['projectname.label']}"
							style="font-size: 12px;" />
						<h:outputLabel value=" : " />
						<p:inplace>
							<p:inputText
								value="#{leaveBalanceBean.employeeAndReporting.project}"
								readonly="true" />
						</p:inplace>
                         <h:inputHidden/>  

						<h:outputLabel value="To be approved by:" />
						<h:outputLabel value=" : " />
						<p:selectOneMenu id="approverMenu"
							value="#{leaveBalanceBean.approverId}"
							styleClass="emplpyeeRegistraionSelectOnemenuWidth">
							<p:ajax event="change"
								listener="#{leaveBalanceBean.approverChanged}"
								update=":leaveBalanceForm:approverMailToBeChanged" />
							<f:selectItems value="#{leaveBalanceBean.approversMap}" />
						</p:selectOneMenu>


                         <h:inputHidden/>  

						<h:outputLabel value="#{msg['tomail.label']}"
							style="font-size: 12px;" />
						<h:outputLabel value=" : " />

						<h:outputLabel
							value="#{leaveBalanceBean.employeeAndReporting.projectManager.email}"
							id="approverMailToBeChanged" />


                        <h:outputLabel value="*" style="color:red;" /> 
						<h:panelGroup>
							
							<h:outputLabel value="#{msg['leavetype.label']}"
								style="font-size: 12px;" />
						</h:panelGroup>
						<h:outputLabel value=" : " />
						<h:panelGroup>
							<p:selectOneMenu
								value="#{leaveBalanceBean.leaveType.leaveTypeid}"
								styleClass="emplpyeeRegistraionSelectOnemenuWidth">
								<f:selectItem itemLabel="Select leave type" itemValue="" />

								<f:selectItems value="#{leaveBalanceBean.leaveTypesMap}" />

							</p:selectOneMenu>

						</h:panelGroup>

						<h:inputHidden />
						<h:inputHidden />
						<h:inputHidden />
	                    <h:inputHidden />
	                    <h:outputLabel value="*" style="color:red;" />
						<h:panelGroup>
							
							<h:outputLabel value="#{msg['leavefrom.label']}"
								style="font-size: 12px;" />
						</h:panelGroup>
						<h:outputLabel value=" : " />
						<p:calendar value="#{leaveBalanceBean.employeeLeave.periodFrom}"
							id="customCal" showButtonPanel="true" navigator="true" disabledWeekends="true"
							pattern="dd-MMM-yyyy" yearRange="c-1:c+1" readOnlyInputText="true">

						</p:calendar>
						<h:outputLabel value="*" style="color:red;" />
						<h:panelGroup>
							
							<h:outputLabel value="#{msg['leaveto.label']}"
								style="font-size: 12px;" />
						</h:panelGroup>
						<h:outputLabel value=" : " />   
						<h:panelGroup>
							<p:calendar value="#{leaveBalanceBean.employeeLeave.periodTo}" yearRange="c-1:c+1" disabledWeekends="true"  readOnlyInputText="true"
								pattern="dd-MMM-yyyy"  showButtonPanel="true" navigator="true">
                             
							</p:calendar>							
						</h:panelGroup>

						<p:spacer />
						<p:spacer />
						<p:spacer />
						<h:panelGroup>
						  <p:selectBooleanCheckbox value="#{leaveBalanceBean.checked}" itemLabel="Half Day">  
                            <p:ajax update="noOfDaysCount" listener="#{leaveBalanceBean.halfDayStatusListner}"/>
                          </p:selectBooleanCheckbox>  
                          
						</h:panelGroup>
						<p:spacer />
						<p:spacer />
						<p:spacer />
						<p:commandButton id="Confirm" icon="ui-icon-check" value="Confirm"
							update="growl,noOfDaysCount"	actionListener="#{leaveBalanceBean.noOfDaysListener}"
								 />
                        <h:inputHidden />
						<h:outputLabel value="#{msg['nodays.label']}"
							style="font-size: 12px;" />
						<h:outputLabel value=" : " />
						<h:panelGroup >
						<p:inputText value="#{leaveBalanceBean.employeeLeave.noOfDays}"
								id="noOfDaysCount" readonly="true"/>
							<!-- <p:inputText value="#{leaveBalanceBean.employeeLeave.noOfDays}"
								id="noOfDaysCount" readonly="true" rendered="#{not leaveBalanceBean.halfDayLeaveFlag}"/>
								
							<p:inputText rendered="#{leaveBalanceBean.halfDayLeaveFlag}" readonly="false" value="#{leaveBalanceBean.halfDay}"
								id="halfDayCount"  /> -->
															
						</h:panelGroup>
						 <h:inputHidden /> 
						<h:outputLabel value="#{msg['availablecontactnumber.lable']}"
							style="font-size: 12px;" />
						<h:outputLabel value=" : " />
						<h:panelGroup>
							<p:inputMask mask="(999) 999-9999"
								value="#{leaveBalanceBean.wamUser.employee.telephone}"
								id="availableContactNumber" />
						</h:panelGroup>
						<h:outputLabel value="*" style="color:red;" />
						<h:panelGroup>
							
							<h:outputLabel value="#{msg['availableaddress.label']}"
								style="font-size: 12px;" />
						</h:panelGroup>
						<h:outputLabel value=" : " />
						<p:inputTextarea
							value="#{leaveBalanceBean.employeeLeave.availableAddress}" />
							<h:outputLabel value="*" style="color:red;" />
						<h:panelGroup>
							
							<h:outputLabel value="#{msg['reasonforleave.label']}"
								style="font-size: 12px;" />
						</h:panelGroup>
						<h:outputLabel value=" : " />
						<p:inputTextarea value="#{leaveBalanceBean.employeeLeave.reason}" />
						<h:inputHidden />
						<h:inputHidden />
						<h:inputHidden />
						<h:inputHidden />
						<h:inputHidden />
						<h:inputHidden />
						<h:inputHidden />
						<h:panelGroup>

							<p:commandButton value="Apply"
								actionListener="#{leaveBalanceBean.applyLeaveAction}"
								update="growl" />
							<p:commandButton value="Cancel"
								actionListener="#{leaveBalanceBean.closeApplyLeaveDialog}"
								update="@form" />
						</h:panelGroup>

					</h:panelGrid>
                   </p:panel>
					<h:outputLabel style="color: #7892B7;font-size:12px;"
						value="Note: Applied leave will be automatically sent to above specified email." />
				</h:panelGrid>

			</p:dialog>
		
           </h:panelGrid>
       
			<p:dialog widgetVar="cancelLeaveWidget" width="400" height="200"
				header="Leave Cancellation" hideEffect="fade" showEffect="fade"
				modal="true" id="cancelLeaveWidget">
				<h:panelGrid columns="3">
					<h:outputLabel value="#{msg['employeeidoremployeename.label']}"
						style="font-size: 12px;" />
					<h:outputLabel value=" : " />
					<p:inplace>
						<p:inputText
							value="#{leaveBalanceBean.selectedEmployeeLeave.employee.firstName}/ #{leaveBalanceBean.selectedEmployeeLeave.employee.employeeCode}"
							readonly="true" />
					</p:inplace>

					<h:outputLabel value="#{msg['leavetype.label']}"
						style="font-size: 12px;" />
					<h:outputLabel value=" : " />
					<p:inplace>
						<p:inputText
							value="#{leaveBalanceBean.selectedEmployeeLeave.leaveType.leaveType}"
							readonly="true" />
					</p:inplace>

					<h:outputLabel value="#{msg['leavefrom.label']}"
						style="font-size: 12px;" />
					<h:outputLabel value=" : " />
					<p:inplace>
						<p:inputText
							value="#{leaveBalanceBean.selectedEmployeeLeave.periodFrom}"
							readonly="true">
							<f:convertDateTime pattern="dd-MMM-yyyy"
								timeZone="#{leaveBalanceBean.defaultTimeZone}" />
						</p:inputText>
					</p:inplace>

					<h:outputLabel value="#{msg['leaveto.label']}"
						style="font-size: 12px;" />
					<h:outputLabel value=" : " />
					<p:inplace>
						<p:inputText
							value="#{leaveBalanceBean.selectedEmployeeLeave.periodTo}"
							readonly="true">
							<f:convertDateTime pattern="dd-MMM-yyyy"
								timeZone="#{leaveBalanceBean.defaultTimeZone}" />
						</p:inputText>
					</p:inplace>

					<h:panelGroup>
						<h:outputLabel value="*" style="color:red;" />
						<h:outputLabel value="#{msg['reasonforleavecancellation.label']}"
							style="font-size: 12px;" />
					</h:panelGroup>
					<h:outputLabel value=" : " />

					<p:inputTextarea
						value="#{leaveBalanceBean.selectedEmployeeLeave.reasonForCancel}" />



					<h:inputHidden />

					<h:inputHidden />
					<h:panelGroup>
						<p:commandButton value="Submit"
							actionListener="#{leaveBalanceBean.leaveCancellationByEmployee}"
							update="@form" />
						<p:commandButton value="Cancel"
							actionListener="#{leaveBalanceBean.closeCancelLeaveDialog}"
							update="@form" />
					</h:panelGroup>

				</h:panelGrid>
			</p:dialog>




		</h:form>
	</ui:define>
</ui:composition>